<template>
  <div class="comment-list">
    <div class="comment-item" v-for="(comment, index) in commentList" :key="index">
      <div class="comment-user">
        <el-avatar :size="30" :src="comment.avatar"></el-avatar>
        <span class="comment-username">{{ comment.username }}</span>
        <span class="comment-time">{{ comment.time }}</span>
      </div>
      <div class="comment-content">
        <StarRating :rating="comment.rating" />
        <p>{{ comment.content }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import StarRating from '../StarRating/index.vue'
import { ref, onMounted } from 'vue'
// 模拟用户评价数据
const commentList = ref([
  {
    avatar: 'https://picsum.photos/30/30',
    username: 'Mr.Jiang',
    time: '2023.12.12 12:12',
    rating: 4,
    content: '产品质量不错，很实用。'
  },
  {
    avatar: 'https://picsum.photos/30/30',
    username: 'Ms.Li',
    time: '2023.12.15 15:15',
    rating: 5,
    content: '非常满意，样式也好看。'
  }
])
</script>

<style scoped>
.comment-list {
  border-top: 1px solid #e0e0e0;
  padding-top: 10px;
}
.comment-item {
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
  padding: 10px;
  border-radius: 5px;
}
.comment-user {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.comment-username {
  margin-left: 10px;
}
.comment-time {
  margin-left: 10px;
  color: #999;
  font-size: 12px;
}
.comment-content {
  text-align: left;
}
</style>